<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
   <canvas id="mycanvas" style="position: absolute;"></canvas>
<script>
/*import*/
function addHandler(target, eventType, handler){  
    if(target.addEventListener){//主流浏览器  
        addHandler = function(target, eventType, handler){  
            target.addEventListener(eventType, handler, false);  
        };  
    }else{//IE  
        addHandler = function(target, eventType, handler){  
            target.attachEvent("on"+eventType, handler);  
        };        
    }  
    //执行新的函数  
    addHandler(target, eventType, handler);  
}  	
function removeHandler(target,eventType,handler){
	if(target.removeEventListerner){
		removeHandler = function(target,eventType,handler){
			target.removeEventListerner(eventType,handler,false);
		}
	}else{
		removeHandler = function(target,eventType,handler){
			target.detachEvent("on"+eventType,handler);
		}
	}
	removeHandler(target, eventType, handler);  
}

function getEventPosition(ev){
  var x, y;
  if (ev.layerX || ev.layerX == 0) {
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }
  return {x: x, y: y};
}

/*step*/
window.onload = function(){
	var snowPos = [{x:50,y:44,z:5},{x:140,y:35,z:3},
        {x:360,y:20,z:1},{x:250,y:50,z:2},
        {x:110,y:90,z:4},{x:310,y:85,z:2},
        {x:65,y:160,z:5},{x:205,y:130,z:5},
        {x:300,y:150,z:3},{x:260,y:210,z:1},
        {x:375,y:215,z:3},{x:155,y:230,z:2},
        {x:30,y:270,z:4}];
	var _canvas = document.getElementById("mycanvas");
	var ctx = _canvas.getContext("2d");
	var who = [],p;
	addHandler(_canvas,"click",function(ev){
		p = getEventPosition(ev);
		draw(p);
		// console.log("who:"+who.toString());     //返回
	});
	function draw(p){
		ctx.clearRect(0, 0,_canvas.width,_canvas.height);
		snowPos.forEach(function(v,i){
			    ctx.beginPath();
			    ctx.rect(v.x, v.y, 100, 100);
			    ctx.stroke();
			theRect  = ctx.rect(10,10,100,100);
	        if(p && ctx.isPointInPath(p.x, p.y)){
		      //如果传入了事件坐标，就用isPointInPath判断一下
		      //如果当前环境覆盖了该坐标，就将当前环境的index值放到数组里
		      who.push(i);
	        } 
		});
	}



 };
</script>
	
</body>
</html>